<template>
  <div class="top-bar">
    <div class="wrap">
      <div class="l">欢迎来到叩丁狼积分商城</div>
      <div class="r">
        <ul>
          <li>
            <img
              @click="clickAvatar"
              class="avatar"
              width="26"
              :src="userInfo.headImg"
              alt=""
            />用户名：{{ userInfo.nickName }}
          </li>
          <li>我的鸡腿：{{ userInfo.coin }}</li>
          <li>获取鸡腿</li>
          <li>叩丁狼官网</li>
          <li class="cart-btn btn" v-show="isLogined">
            <img src="../assets/img/cart.png" alt="" />
            <span>购物车</span>
            <b>{{ cartTotal }}</b>
          </li>
          <li
            class="login-btn btn"
            v-show="!isLogined"
            @click="chanIsShowLoginMadal(true)"
          >
            登录
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState, mapActions } from "vuex";
import { WeixinLoginApi, UserProfilesAPI } from "@/request/api";
export default {
  data() {
    return {
      // 购物车数量
      // cartTotal: 0,
    };
  },
  computed: {
    ...mapState({
      isLogined: (state) => state.loginStatus.isLogined,
      cartTotal: (state) => state.userInfo.cartTotal,
      userInfo: (state) => state.userInfo.userInfo,
    }),
  },
  created() {
    this.setUserLoginState();
  },
  // 第一种写法
  // 直接写在TopBar组件里,通过created执行

  // 监听路由变化
  // watch: {
  //   "$route.path": {
  //     handler(newVal, oldVal) {
  //       console.log(newVal, oldVal);
  //       // 执行created里面的代码,更新用户的登录状态.调用回created原本写的代码
  //       this.setUserLoginState();
  //     },
  //   },
  // },
  methods: {
    setUserLoginState() {
      console.log("code为:", this.$route.query.code);
      // let mycode = this.$route.query.code;
      let mycode = null;
      setTimeout(() => {
        mycode = this.$route.query.code;
        if (mycode) {
          // 微信扫码第二步-------发起请求,携带code换取token
          WeixinLoginApi({
            code: this.$route.query.code,
          }).then((res) => {
            //{code: 0, message: '登录成功！', x-auth-token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2M…GUifQ.67WdFJpUb18AMxxSZei7Rhue-5zqGFIdvpPWkM3k14Y'}
            // console.log(res);
            if (res.code == 0) {
              // 登录成功之后的逻辑
              // 1.提示登陆成功
              this.asyncChanIsShowToast({
                msg: "登录成功",
                type: "success",
              });
              // 2.保存token
              localStorage.setItem("x-auth-token", res["x-auth-token"]);
              // 3.登录状态的设置
              this.chanIsLogined(true);
              // 4.清除掉浏览器地址栏上的code
              // this.$router.push(当前路径);
              this.$router.push(this.$route.path);

              // 5.更新页面上的用户信息
              this.asyncUpdateUserInfo();
            } else {
              this.asyncChanIsShowToast({
                msg: res.message,
                type: "danger",
              });
            }
          });
        } else {
          // 只要一加载到TopBar组件就会执行到这里的代码

          // 没有code,说明没有扫码,或者 用户已经登录了,不用扫码了
          // 判断有没有token,设置登录状态(因为TopBar上面的信息,是需要靠 有没有登录来去展示的)
          let token = localStorage.getItem("x-auth-token");
          // 设置登录状态,为什么设置登录状态,因为TopBar上面的信息,是需要靠 有没有登录来去展示的
          // this.chanchanIsLogined(token?true:false);
          this.chanIsLogined(Boolean(token));
          if (token) {
            // 加载这个TopBar组件的时候,就需要获取用户信息
            // 所以发起请求,请求用户信息

            this.asyncUpdateUserInfo();

            // UserProfilesAPI().then((res) => {
            //   console.log("用户信息为:", res);
            // });
          } else {
            // 还原默认值
            this.initUserInfo();
          }
        }
      }, 100);
    },
    ...mapMutations({
      chanIsShowLoginMadal: "isShowLogin/chanIsShowLoginMadal",
      chanIsShowToast: "toastStatus/chanIsShowToast",
      chanIsLogined: "loginStatus/chanIsLogined",
      initUserInfo: "userInfo/initUserInfo",
    }),
    ...mapActions({
      asyncChanIsShowToast: "toastStatus/asyncChanIsShowToast",
      asyncUpdateUserInfo: "userInfo/asyncUpdateUserInfo",
    }),
    clickAvatar() {
      // 展示提示框,就是在调用这个Toast组件
      // 实际上,在调用这个组件的时候.提示文本.还有文本前面的符号是我们自己决定的!!
      // this.chanIsShowToast({
      //   isShow: true,
      //   msg: "成功",
      //   // type表示图标,"success"表示成功,info表示警告,danger表示失败
      //   type: "danger",
      // });
      this.asyncChanIsShowToast({
        msg: "成功",
        type: "success",
      });
      // setTimeout(() => {
      //   // 隐藏提示框
      //   this.chanIsShowToast({
      //     isShow: false,
      //     msg: "成功",
      //     type: "danger",
      //   });
      // }, 1500);
    },
  },
};
</script>
 
<style lang = "less" scoped>
@import url("../assets/css/public.less");
.top-bar {
  height: 40px;
  background: #242b39;
  .wrap {
    height: 40px;
    /* background-color: #ffc; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*字体的样式 */
    font-size: 14px;
    font-family: SourceHanSansSC;
    font-weight: 300;
    color: #fffefe;
    .r ul {
      display: flex;
      align-items: center;
      li {
        cursor: pointer;
        display: flex;
        align-items: center;
        margin-left: 20px;
        .avatar {
          border-radius: 50%;
          margin-right: 5px;
        }
        &.btn {
          /*选择到有.btn类的li标签*/
          width: 124px;
          height: 40px;
          background: @base-color;
          display: flex;
          justify-content: center;
        }

        &.cart-btn {
          align-items: center;
          span {
            margin: 0 5px;
          }
          b {
            width: 22px;
            height: 22px;
            line-height: 22px;
            background-color: #fd604d;
            border-radius: 50%;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>